<template>
  <div class="addressWrapper">
    <group>
      <cell title="新增送餐地址" is-link @click="goAdd">
        <img src="http://static.52letsgo.cn/zz/wechatimg/ic_position.png" slot="icon" width="24" style="display:block;margin-right:5px;" alt="">
      </cell>
    </group>
    <group title="地址列表">
      <div class="address-item" v-for="item in addressList" @click="goEdit(item)">
        <p class="top"><span>{{item.consignee}}</span><span class="right">{{item.phone}}</span></p>
        <p class="bottom">{{item.address}}</p>
      </div>
    </group>

    <div class="noneData" v-show="noneData">
      <img src="http://static.52letsgo.cn/zz/wechatimg/bg_no_data.png" alt="">
    </div>
  </div>
</template>
<script>
  import { isNewAddress, address, addressClick } from './../../vuex/getters.js'
  import { update_is_new_address, update_address, update_address_click, update_all_to_empty } from './../../vuex/actions.js'
  import { Group, Cell } from './../../components'

  import Slider from './../components/slider/slider.vue'
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  export default {
    data () {
      return {
        userInfo: LocalStorageUtil.getItem("User"),
        addressList: new Array(),
        noneData: false
      }
    },
    components: {
      Group,
      Cell,
      Slider
    },
    vuex: {
      getters: {
        isNewAddress,
        address,
        addressClick
      },
      actions: {
        update_is_new_address,
        update_address,
        update_address_click,
        update_all_to_empty
      }
    },
    created: function() {
      var data = {
        action: 'list',
        userId: this.userInfo.id
      }
      MyRequest.MyGetWithToast("ConsigneeList", this, function(result, that) {
        Global.closeLoading()
        console.log(result.data.length)
        that.addressList = result.data
        that.noneData = false
        if(result.data.length == 0) {
          that.noneData = true
        }
      }, data)
    },
    methods: {
      goAdd () {
        this.update_all_to_empty('')
        this.update_is_new_address(true)
        this.$router.go({path: '/newAddress'})
      },
      goEdit (item) {
        if(this.addressClick) {
          this.update_address_click(false)
          LocalStorageUtil.setItem("Address", item)
          history.go(-1)
        } else {
          var str = JSON.stringify(item)
          var newAddress = JSON.parse(str)
          newAddress.address = (newAddress.address + '').split('-')[1]
          console.log(newAddress)
          //item.address = (item.address + '').split('-')[1]
          this.update_is_new_address(false)
          this.update_address(newAddress)
          this.$router.go({path: '/newAddress'})
        }
      }
    }
  }
</script>
<style>
.addressWrapper .noneData {
  width: 100%;
  text-align: center;
}
.addressWrapper .noneData img {
  width: 80%;
  margin-top: 30%; 
}
.addressWrapper .weui_cells {
  margin-top: 0;
  box-sizing: border-box;
}

.addressWrapper .weui_cells_title {
  margin-top: 0;
  margin-bottom: 0;
  padding: 1rem 1.5rem;
  font-family: "微软雅黑";
  background: #f3f3f3;
}
.addressWrapper .address-item {
  padding: 1rem;
  font-family: "微软雅黑";
  border-bottom: 1px solid #f2f2f2;
}
.addressWrapper .address-item .top {
  font-size: 1.4rem;
  color: #000;
}
.addressWrapper .address-item .top .right {
  margin-left: 1rem;
}
.addressWrapper .address-item .bottom {
  font-size: 1.3rem;
  color: #666666;
  margin-top: 5px;
}
.addressWrapper  .weui_cells:after {
  border-bottom: 0;
}
.addressWrapper .weui_cell_bd > p {
  font-family: "微软雅黑";
  font-size: 1.4rem;
}
.addressWrapper .vux-swipeout {
  padding: 1rem;
}
</style>
